---
title: Tabs
description: Tabbed interface built on Radix Tabs.
component: Tabs
---

<LiveComponent language="tsx">
{`
  import { Tabs, TabsList, TabsTrigger, TabsContent } from "@pipecat-ai/voice-ui-kit";

  <Tabs defaultValue="a">
    <TabsList>
      <TabsTrigger value="a">Tab A</TabsTrigger>
      <TabsTrigger value="b">Tab B</TabsTrigger>
      <TabsTrigger value="c">Tab C</TabsTrigger>
    </TabsList>
    <TabsContent value="a">Content A</TabsContent>
    <TabsContent value="b">Content B</TabsContent>
    <TabsContent value="c">Content C</TabsContent>
  </Tabs>
`}
</LiveComponent>

<TypeTable
  className="text-sm"
  type={{
    Tabs: {
      description: "Tabs root component (Radix Tabs Root)",
      type: "React.ComponentProps<typeof TabsPrimitive.Root>",
      required: false,
      default: "{}",
    },
    TabsList: {
      description: "Container for tab triggers",
      type: "React.ComponentProps<typeof TabsPrimitive.List>",
      required: false,
      default: "{}",
    },
    TabsTrigger: {
      description: "An individual tab trigger",
      type: "React.ComponentProps<typeof TabsPrimitive.Trigger>",
      required: false,
      default: "{}",
    },
    TabsContent: {
      description: "Content for a tab",
      type: "React.ComponentProps<typeof TabsPrimitive.Content>",
      required: false,
      default: "{}",
    },
  }}
/>


